<template>
  <!-- 遍历 navData 生成菜单 -->
  <template v-for="item in treeData" :key="item.path">
    <!-- 如果有子路由，生成子菜单 -->
    <el-sub-menu
      v-if="item.children && item.children.length"
      :index="item.path"
    >
      <template #title>
        <el-icon>
          <component :is="getIconComponent(item.icon)" />
        </el-icon>
        <span>{{ item.menuName }}</span>
      </template>
      <!-- 递归生成子菜单 -->
      <TreeMenu :treeData="item.children"></TreeMenu>
    </el-sub-menu>
    <!-- 单个菜单项 -->
    <el-menu-item v-else :index="item.path">
      <el-icon>
        <component
          v-if="getIconComponent(item.icon)"
          :is="getIconComponent(item.icon)"
           @click="navigateTo(item.path)"
        />
      </el-icon>

      <span>{{ item.menuName }}</span>
    </el-menu-item>
  </template>
</template>

<script setup>
// import { onMounted } from 'vue'
// import { defineOptions } from 'vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const navigateTo = (path) => {
  router.push(path)  // 或者使用 router.replace(path) 根据需求
}
defineOptions({
  name: 'TreeMenu'
})
defineProps({
  treeData: {
    type: Array,
    default: () => []
  }
})
const getIconComponent = (iconName) => {
  return ElementPlusIconsVue[iconName] || ElementPlusIconsVue['DataBoard']
}

// 当前选中的菜单项
// const activeMenu = ref('/electric/manage')

// 处理菜单点击
// const handleSelect = (key) => {
// }
</script>

<style scoped>
/* 自定义菜单图标样式 */
.icon-email {
  margin-right: 8px;
}
</style>
